<template>
  <div class="tagsitem" v-if="!isClose" :class="!close ? 'on' : ''">
    <span v-if="close">{{ item }}</span
    ><router-link :to="{ name: 'TAGS', params: { v: item } }" v-else
      ><span><i class="icon-uniE950"></i>{{ item }}</span></router-link
    ><a
      href="javascript:;"
      @click="closeClickHandle"
      class="tagsitem_close"
      v-if="close"
      ><span class="icon-close-bold"></span
    ></a>
  </div>
</template>
<script>
export default {
  name: "TagsItem",
  props: {
    item: {
      type: String,
      default() {
        return "";
      },
    },
    close: {
      type: Boolean,
      default() {
        return true;
      },
    },
  },
  data() {
    return {
      isClose: false,
    };
  },
  methods: {
    closeClickHandle() {
      this.isClose = true;
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.tagsitem {
  display: flex;
  border: 1 / @base solid #ccc;
  border-radius: 5 / @base;
  font-size: 14 / @base;
  line-height: 20 / @base;
  padding: 2 / @base 0 2 / @base 5 / @base;
  &.on {
    padding: 0 2 / @base;
    border: 0;
    a {
      display: inline-block;
      padding: 2 / @base 5 / @base;
      border: 1 / @base solid #efefef;
      border-radius: 30 / @base;
      background-color: #efefef;
      span {
        font-size: 14 / @base;
        i {
          border: 1 / @base solid #ccc;
          border-radius: 30 / @base;
          margin: 0 5 / @base 0 0;
          background-color: #fff;
          vertical-align: middle;
        }
      }
    }
  }
  span {
    width: 90%;
  }
  a {
    &.tagsitem_close {
      width: 20 / @base;
      height: 20 / @base;
      display: block;
    }
    span {
      font-size: 12 / @base;
      line-height: 20 / @base;
    }
  }
}
</style>
